<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Dashboard Starter UI, by Keen IO</title>

  <!-- Demo Dependencies -->
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
  <script type="text/javascript" src="https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

  <!-- keen-analysis@3 -->
  <script src="https://cdn.jsdelivr.net/npm/keen-analysis@3" type="text/javascript"></script>

  <!-- keen-dataviz@3 -->
  <link href="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/keen-dataviz@3/dist/keen-dataviz.min.js" type="text/javascript"></script>

  <!-- Dashboard -->
  <link rel="stylesheet" type="text/css" href="../../assets/css/keen-dashboards.css" />
  <link rel="stylesheet" type="text/css" href="geo-explorer.css" />
  <script type="text/javascript" src="geo-explorer.js"></script>
</head>

<body class="keen-dashboard">

  <div id="app-wrapper">
    <div id="app-toolbar">
      <form action="" onsubmit="return false;" method="post">
        <div class="tools">
          <div class="tool radius">
            <h5>Query Radius</h5>
            <input type="number" id="radius-value" class="form-control" value="">
            <select class="form-control" id="radius-suffix">
              <option></option>
              <option value="mi">mi</option>
              <option value="km">km</option>
            </select>
          </div>
          <div class="tool coordinates">
            <h5>Latitude</h5>
            <input type="number" step="any" id="coordinates-lat" class="form-control" placeholder="Latitude">
          </div>
          <div class="tool coordinates">
            <h5>Longitude</h5>
            <input type="number" step="any" id="coordinates-lng" class="form-control" placeholder="Longitude">
          </div>
          <div class="tool timeframe">
            <h5>Start time</h5>
            <input type="date" id="timeframe-start" class="form-control" placeholder="mm/dd/yyyy">
          </div>
          <div class="tool timeframe">
            <h5>End time</h5>
            <input type="date" id="timeframe-end" class="form-control" placeholder="mm/dd/yyyy">
          </div>
          <div class="tool">
            <h5>Keen IO &#9825's Mapbox</h5>
            <button id="refresh" class="btn btn-primary btn-block">Refresh</button>
          </div>
        </div>
      </form>
    </div>
    <div id="app-maparea"></div>

    <div id="app-sidebar">
      <div id="chart-01" class="app-sidebar-chart"></div>
      <br>
      <div id="chart-02" class="app-sidebar-chart"></div>
      <br>
      <div id="chart-03" class="app-sidebar-chart"></div>
    </div>

  </div>

  <p class="small text-muted">Built with &#9829; by <a href="https://keen.io">Keen IO</a></p>

  <!-- Project Analytics -->
  <script type="text/javascript" src="../../assets/js/keen-analytics.js"></script>
</body>

</html>